<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
      .bj{
          height: 2000px;
          width: 100%;
          background-color: #9E9EA6;
      }
      .hide{
          display: none;!important;
      }
        .shade{
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #5ab2ce;
            z-index: 100;
        }
        .modal{
            width: 400px;
            height: 400px;
            position: fixed;
            background-color: white;
            top: 50%;
            left: 50%;
            margin-top:-200px ;
            margin-left: -200px;
            z-index: 101;
        }
    </style>
</head>
<body>
    <div class="bj">
        <input type="button" value="点我" onclick="f1()">
        <div id="shade" class="shade hide"></div>
        <div id="modal" class="modal hide">
            <a href="javascript:void(0);"onclick="f2()">取消</a>
        </div>
    </div>
    <script>
        function f1() {
            var t1 = document.getElementById("shade");
            var t2 = document.getElementById("modal");
            t1.classList.remove("hide");
            t2.classList.remove("hide");
        }
        function f2() {
            var t1 = document.getElementById("shade");
            var t2 = document.getElementById("modal");
            t1.classList.add("hide");
            t2.classList.add("hide");
        }
        window.onkeydown=function (event) {
            if(event.keyCode==27){f2();}
        }
    </script>
</body>
</html>